<template>
  <default-home-card icon="FlagOutlined" title="业务收款" :tabs="tabs" @tabChange="onTabChange">
    <div style="height: 340px">
      <div>
        <text style="font-size: 32px; margin-right: 10px">{{ Number(total_receivable).toFixed(2) }}</text> 应收金额（元）
      </div>
      <div class="echarts-box">
        <div class="car-main" id="car-main"></div>
        <div class="custom-legend">
          <div class="legend-item">
            <div style="display: flex">
              <div class="legend-color" :style="{ backgroundColor: '#FF6384' }"></div>
              <div>
                <div class="legend-text">实收金额</div>
                <div class="legend-value">现结款、押金、预付款</div>
              </div>
            </div>
            <div>
              <span class="legend-name">{{ Number(total_actual_received).toFixed(2) }}元</span>
            </div>
          </div>
          <div class="legend-item">
            <div style="display: flex">
              <div class="legend-color" :style="{ backgroundColor: '#36A2EB' }"></div>
              <div>
                <div class="legend-text">押金</div>
                <div class="legend-value">货物押金</div>
              </div>
            </div>
            <div>
              <span class="legend-name">{{ Number(deposit).toFixed(2) }}元</span>
            </div>
          </div>
          <div class="legend-item">
            <div style="display: flex">
              <div class="legend-color" :style="{ backgroundColor: '#FFCE56' }"></div>
              <div>
                <div class="legend-text">预收款</div>
                <div class="legend-value">预付款支付</div>
              </div>
            </div>
            <div>
              <span class="legend-name">{{ Number(prepayment).toFixed(2) }}元</span>
            </div>
          </div>
          <div class="legend-item">
            <div style="display: flex">
              <div class="legend-color" :style="{ backgroundColor: '#4BC0C0' }"></div>
              <div>
                <div class="legend-text">欠款</div>
                <div class="legend-value">门店欠款待结算</div>
              </div>
            </div>
            <div>
              <span class="legend-name">{{ Number(credit).toFixed(2) }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </default-home-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DefaultHomeCard from '@/views/system/home/components/default-home-card.vue'
import * as echarts from 'echarts'
import { homeApi } from '@/api/system/home-api'
import _ from 'lodash'

onMounted(() => {
  init()
})

const total_receivable = ref(0)
const total_actual_received = ref(0)
const deposit = ref(0)
const prepayment = ref(0)
const credit = ref(0)
const time_type = ref(1)
const tabs = ref([
  { key: '1', title: '今天' },
  { key: '2', title: '本周' },
  { key: '3', title: '本月' }
])

function onTabChange(key) {
  time_type.value = key
  init()
}

async function init() {
  const res = await homeApi.businessReceipts({ time_type: time_type.value })
  total_receivable.value = res.data.total_receivable
  total_actual_received.value = res.data.total_actual_received
  deposit.value = res.data.payment_breakdown.deposit.amount
  prepayment.value = res.data.payment_breakdown.prepayment.amount
  credit.value = res.data.payment_breakdown.credit.amount

  let chartDom = document.getElementById('car-main')
  if (chartDom) {
    let myChart = echarts.init(chartDom)
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        data: [''],
        show: false
      },
      series: [
        {
          name: '实收金额',
          type: 'bar',
          stack: 'total',
          barWidth: 40,
          data: [Number(total_actual_received.value)],
          itemStyle: {
            color: '#FF6384'
          }
        },
        {
          name: '押金',
          type: 'bar',
          stack: 'total',
          barWidth: 40,
          data: [Number(deposit.value)],
          itemStyle: {
            color: '#36A2EB'
          }
        },
        {
          name: '预收款',
          type: 'bar',
          stack: 'total',
          barWidth: 40,
          data: [Number(prepayment.value)],
          itemStyle: {
            color: '#FFCE56'
          }
        },
        {
          name: '欠款',
          type: 'bar',
          stack: 'total',
          barWidth: 40,
          data: [Number(credit.value)],
          itemStyle: {
            color: '#4BC0C0'
          }
        }
      ]
    }
    option && myChart.setOption(option)
  }
}
</script>

<style lang="less" scoped>
.echarts-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .car-main {
    width: 100%;
    height: 120px;
    background: #fff;
  }
  .custom-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    .legend-item {
      display: flex;
      justify-content: space-between;
      width: 48%;
      margin-top: 10px;
      .legend-color {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        margin-right: 5px;
        margin-top: 10px;
      }
      .legend-text {
        font-size: 16px;
        color: #333;
      }
      .legend-value {
        font-size: 14px;
        color: #666;
      }
      .legend-name {
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
}
</style>
